<template>
  <div class="hello">
    <div v-for="(item, index) in groupData"
         v-bind:key="index">
      <div class="parentButtonGroup">
        <div style="display:inline;"
             v-for="_item in item"
             v-bind:key="_item.id">
          <van-button v-bind:style="{ 'width': buttonWidth + 'px'}"
                      v-bind:class="{ 'selectedColor':  _item.isSelected }"
                      class="defaultButton"
                      type="default"
                      @click="showChild(_item.id, index)">{{_item.title}}</van-button>
          <div v-if="_item.id === selectId && child"
               class="target"></div>
        </div>

        <!-- 子对象 -->
        <div v-if="selectId && child && groupIndex === index && isOpen"
             class="childButton">

          <div style="display:inline;"
               v-for="item in child"
               v-bind:key="item.id">
            <van-button v-bind:style="{ 'width': buttonWidth + 'px'}"
                        v-bind:class="{ 'selectedColor':  item.isSelected  }"
                        class="defaultButton"
                        type="default"
                        @click="selectChild(item.id,index)">{{item.title}}</van-button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import data from './formatData.json'
import { treeDataTranslate } from '@/utils'
export default {
  name: 'HelloWorld',
  data () {
    return {
      buttonWidth: null,
      data: [], // 结果数据
      groupData: [],
      child: [],
      selectId: null,
      groupIndex: null,
      isOpen: null
    }
  },
  mounted () {
    // 输入的是平面数据，包含被选择的值
    this.buttonWidth = (window.innerWidth - 50) / 4
    // 将数组拆分成4个为一组
    var tmp = treeDataTranslate(data)
    for (var i = 0; i < tmp.length; i += 4) {
      this.groupData.push(tmp.slice(i, i + 4))
    }
  },
  methods: {
    // 点击父类按钮，展示子对象按钮
    showChild (id, index) {
      let currentChild = null
      if (this.groupIndex === index) {
        // this.isOpen = true
        this.isOpen && this.selectId === id ? this.isOpen = false : this.isOpen = true
      } else {
        this.groupIndex = index
        this.isOpen = true
      }
      this.groupData[index].forEach((value, index, items) => {
        if (value.id === id) {
          if (value.children.length === 0) {
            value.isSelected ? value.isSelected = false : value.isSelected = true
          } else {
            currentChild = value.children
            value.children.forEach((_value, _index, _items) => {
              if (_value.isSelected === true) {
                value.isSelected = true
              }
            })
          }
        }
      })
      console.log('SelectIndex:' + this.groupIndex)
      console.log('isOpen:' + this.isOpen)
      this.child = currentChild
      this.selectId = id
    },

    // 点击子对象，修改父对象状态和子对象选择状态
    selectChild (selectId, selectIndex) {
      let countTrue = 0
      // 修改子对象的选择状态
      this.groupData[selectIndex].forEach((value, index, items) => {
        if (value.id === this.selectId) {
          value.children.forEach((valueChild, indexChild, itemsChild) => {
            if (selectId === valueChild.id) {
              valueChild.isSelected ? valueChild.isSelected = false : valueChild.isSelected = true
            }
          })
          value.children.forEach((_value, _index, _items) => {
            if (_value.isSelected === true) {
              countTrue++
            }
          })
          countTrue > 0 ? value.isSelected = true : value.isSelected = false
        }
      })
      this.data = []
      this.groupData.forEach(value => {
        value.forEach(value => {
          this.data.push(value)
        })
      })
      console.log(this.data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  background-color: white;
  flex-direction: column;
  height: 100vh;
}
.parentButtonGroup {
  display: flex;
  width: 100%;
  overflow-x: auto;
  flex-wrap: wrap;
}
.defaultButton {
  margin: 5px;
  padding: 0;
  border-radius: 5px;
}
.childButton {
  display: flex;
  width: 100%;
  background-color: #ebebeb;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.selectedColor {
  background-color: white;
  border-color: orange;
  color: orange;
}
.target {
  width: 0;
  height: 0;
  margin-left: 30px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #ebebeb;
}
</style>
